<template>
  <view>
    <!-- 选项开始 -->
    <view class="jiFen">
      <!-- 积分明细 -->
      <view class="jiFen-mingxi" :class="active===1?'active':''" @click="a(1)">
        互动消息
      </view>
      <!-- 提现记录 -->
      <view class="jiFen-jilu" :class="active===2?'active':''" @click="a(2)">
        系统消息
      </view>
    </view>
    <!-- 选项结束 -->
    <!-- 没有更多数据 -->
    <myBox></myBox>
  </view>
</template>

<script>
  import myBox from "../../components/my-box/my-box.vue"

  export default {
    components: {
      myBox
    },
    data() {
      return {
        active: 1
      };
    },
    methods: {
      a(i) {
        this.active = i;
      }
    }
  }
</script>

<style lang="scss">
  // 选项开始
  .jiFen {
    display: flex;
    height: 100rpx;
    background-color: #fff;
    align-items: center;
    text-align: center;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 1, 0.2);
    margin-bottom: 20rpx;

    .jiFen-mingxi {
      flex: 1;
    }

    .jiFen-jilu {
      flex: 1;
    }
  }

  .active {
    font-size: 36rpx;
    font-weight: 700;
  }
</style>
